<template>
   <div style="padding-top:50px">
       <Headers title="缺料已办列表"></Headers>
    <div class="menu"><van-tag plain type="primary" @click="gotoHasdone">代办</van-tag></div>
    <div class="cont">
      <van-cell-group>
        <van-cell label="2012222010095" is-link @click="gotoDetail">
          <template #title>
            <van-tag type="success">欠料单号</van-tag>
          </template>
        </van-cell>
        <van-cell title="新款(扩色)单号:" label="2012222010095" />
        <van-cell title="物料号:" label="2012222010095" />
        <van-cell title="样衣号:" label="2012222010095" />
        <div class="mycell">
           <span class="mycell_title">名称:</span> <span class="mycell_value">啦啦啦</span>
        </div>
        <div class="mycell">
           <span class="mycell_title">版次:</span> <span class="mycell_value">哒哒哒</span>
        </div>
      </van-cell-group>
      <van-cell-group>
        <van-cell label="2012222010095" is-link>
          <template #title>
            <van-tag type="success">欠料单号</van-tag>
          </template>
        </van-cell>
        <van-cell title="新款(扩色)单号:" label="2012222010095" />
        <van-cell title="物料号:" label="2012222010095" />
        <van-cell title="样衣号:" label="2012222010095" />
        <div class="mycell">
           <span class="mycell_title">名称:</span> <span class="mycell_value">啦啦啦</span>
        </div>
        <div class="mycell">
           <span class="mycell_title">版次:</span> <span class="mycell_value">哒哒哒</span>
        </div>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
     gotoHasdone(){
        this.$router.replace("/lackMateriaTodoList")
     },
     gotoDetail(){
        this.$router.push("/lackMateriaDetail")
     },
  },
};
</script>
<style scoped lang="less">
.title {
  text-align: center;
  margin: 10px;
  font-size: 20px;
  line-height: 20px;
}
.cont {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.van-cell-group {
  width: 170px;
  padding: 4px;
  margin: 4px;
  border-radius: 20px;
  .van-cell {
    font-size: 12px;
    padding: 4px;
    margin: 0;
  }
}
.menu{
   text-align: right;
   margin: 10px;
}
.mycell{
   display: flex;
   font-size: 12px;
   line-height: 20px;
   padding: 4px;
   position: relative;
   box-sizing: border-box;
   .mycell_title{
      width: 30px;
      font-size: 400;
      color: #323233;
   }
   .mycell_value{
      flex:1;
      font-size: 400;
      color: #969799;
   }
  
}
 .mycell::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0.42667rem;
    bottom: 0;
    left: 0.42667rem;
    border-bottom: 0.02667rem solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}
</style>